<template>
  <div class="catalog">
    <van-nav-bar
      v-if="item"
      :title="item.title"
      left-arrow
      @click-left="$router.push({name:'BookInfo',params:{id:item._id}})"
      fixed
    >
      <template #left>
        <van-icon name="arrow-left" size="23" color="#666" />
      </template>
    </van-nav-bar>

    <van-loading type="spinner" v-if="load" />
    <ul>
      <li
        v-for="(item, index) in chapters"
        :key="index"
        @click="lookBook(item, index)"
      >
        <span class="title" :style="{ color: index==currChapter? '#da3d3f' : '' }"
          >{{ index + 1 }}.{{ item.title }}</span
        >
        <span v-if="item.isVip" class="lock"><van-icon name="warn-o" /></span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  props: ["book"],
  data() {
    return {
      chapters: [],
      item: this.book,
      load: true,
      currChapter:null,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    ...mapMutations(["addUser"]),
    lookBook(item, index) {
      this.addChapters(item, index);
      this.$router.push({
        name: "CatalogCon",
        params: {
          id: item._id,
          link: item,
          index: index,
          book: this.item,
          chapters: this.chapters,
          
        },
      });
      this.currChapter = this.getCurrChapters();

    },
    //获取当前看到第几章
    getCurrChapters() {
      let hasLook = this.user.chapters.find((item) => item.id == this.item._id);
      // console.log(hasLook);
      if (!hasLook) return 0;
      return hasLook.currIndex;
    },
    addChapters(item, index) {
      let user = this.user;
      if (user.chapters.some((chapter) => item._id == chapter.currChapter.id))
        return;
      // 如果没有这本书的话push，否则修改
      let hasLook = user.chapters.findIndex((item) => item.id == this.item._id);
      if (hasLook>=0) {
       user.chapters.splice(hasLook,1);
        user.chapters.push({
          bookName: this.item.title,
          id: this.item._id,
          currChapter: item,
          currIndex: index,
        });
      } else {
        user.chapters.push({
          bookName: this.item.title,
          id: this.item._id,
          currChapter: item,
          currIndex: index,
        });
      }

      this.addUser(user);

      let users = JSON.parse(localStorage.getItem("user"));
       users = users.map((item) => {
        if (this.user.name == item.name) {
          return this.user;
        } else {
          return item;
        }
      });
      localStorage.setItem("user", JSON.stringify(users));

    },
  },
  activated() {
    this.load = true;
    this.item = this.book;

    //存储本地刷新还有数据
    if (this.book) localStorage.setItem("currBook", JSON.stringify(this.book));
    if (!this.item) {
      this.item = JSON.parse(localStorage.getItem("currBook"));
      this.load = false;
    }
      this.currChapter = this.getCurrChapters();

    window
      .axios(
        `http://api.kele8.cn/agent/http://api.zhuishushenqi.com/atoc?view=summary&book=${this.item._id}`
      )
      .then((id) => {
        window
          .axios(`http://api.kele8.cn/agent/http://api.zhuishushenqi.com/atoc/${id.data[0]._id}?view=chapters`)
          .then((e) => {
            this.chapters = e.data.chapters;
            this.load = false;
          });
      });
  },
};
</script>

<style lang="less">
.catalog {
  // 顶部
  .van-nav-bar {
    .van-nav-bar__content {
      height: 58.4px;
      .van-nav-bar__left {
        padding-left: 8px;
        .van-icon {
          font-weight: 600;
          font-size: 25px;
        }
      }
      .van-nav-bar__title {
        color: #666;
        font-weight: 600;
      }
    }
  }
  ul {
    margin-top: 58.4px;
    li {
      font-size: 14px;
      padding: 16px 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: @borderBtm;
      .title {
        flex: 1;
      }
      .lock {
        // flex-basis: 1;
        float: right;
      }
    }
  }
  .van-loading {
    height: 100vh;
    display: grid;
    place-content: center;
  }
}
</style>